<template>
<div class="VerifyDetail info-block" v-if="info">
  <div class="info-header">
    <div class="info-status">{{'当前订单状态：待核销'}}</div>
    <div class="info-button"><el-button type="primary" size="mini" @click="verify">核销</el-button></div>
  </div>
  <div class="info-content">
    <div class="info-item"
      v-for="(item, index) in templateArray"
      :key="index">
      <div class="info-item-header el-icon-medal">
        {{item.name}}
      </div>
      <y-table
          v-if="item.type === 'table'"
          border
          :getDataWay="{ data: item.model }"
          :columns="item.columns">
      </y-table>
      <el-descriptions :column="item.column || 3" direction="vertical" border v-else>
        <el-descriptions-item
            v-for="(item2, index2) in item.columns"
            :key="index + '_' + index2"
            :span="item2.span || 1">
          <template slot="label">
            {{item2.label}}
          </template>
          <span>
            {{ generateDisplay(item2, item.model) }}
          </span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "VerifyDetail",
  inject: ['getEnum'],
  props:{
    code: String
  },
  computed:{
    templateArray(){
      if(!this.info) return []
      return [
        {
          name: '订单信息',
          model: Object.assign({}, this.info.orderDeliveryInfo, this.info.mallOrderInfo),
          column: 3,
          columns: [
            {
              label: '订单号',
              prop: 'orderSn'
            },
            {
              label: '下单人',
              prop: 'memberName'
            },
            {
              label: '订单来源',
              formatter: (function(row){
                return this.$$getCommonArrayName(row.sourceType, this.getEnum('orderSource'))
              }).bind(this)
            },
            {
              label: '下单时间',
              prop: 'commitTime'
            },
            {
              label: '预约时间',
              prop: 'appointmentTime',
              span: 2
            },
            {
              label: '提货地址',
              span: 3,
              formatter(row){
                return `${row.receiverProvince},${row.receiverCity},${row.receiverRegion}  ${row.receiverDetailAddress}`
              }
            }
          ]
        },
        {
          name: '商品信息',
          type: 'table',
          model: this.info.mallOrderItems,
          column: 4,
          columns: [
            {
              label: '货号',
              prop: 'productSn'
            },
            {
              label: '商品名',
              prop: 'productName'
            },
            {
              label: '商品规格',
              prop: 'productSpec'
            },
            {
              label: '商品数量',
              prop: 'productQuantity'
            }
          ]
        }
      ]
    }
  },
  created(){
    this.initInfo();
  },
  data(){
    return{
      info: null
    }
  },
  methods:{
    generateDisplay(row, model){
      let str = model[row.prop];
      if(row.formatter){
        str = row.formatter(model);
      }
      if(!str && str !== 0){
        str = row.emptyText || '无';
      }
      return str;
    },
    verify(){
      this.$yAxios({
        url: this.$api.goods.verification,
        data: {
          id: this.code
        }
      }, info => {
        this.$emit('success');
      })
    },
    initInfo(){
      this.$yAxios({
        url: this.$api.goods.verifyDetail,
        data: {
          goodsCode: this.code
        },
        loading: true
      }, info => {
       this.$set(this, 'info', info);
      })
    }
  }
}
</script>

<style scoped>

</style>